<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        .question {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .question:hover {
            color: #007BFF;
        }

        .answer {
            display: none;
            padding-left: 20px;
            margin-top: 10px;
        }

        .active .answer {
            display: block;
        }
    </style>
</head>

<body class="bg-gray-100">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="logo-container">
            <span class="text-xl font-bold text-blue-600">浮点流觞</span>
        </div>
        <div class="sub-nav space-x-4">
            <a href="gerenzhongxin.html" class="text-gray-600 hover:text-blue-600">个人中心</a>
            <a href="#" class="text-gray-600 hover:text-blue-600">商家中心</a>
            <a href="#" class="text-gray-600 hover:text-blue-600">帮助中心</a>
            <a href="#" class="text-gray-600 hover:text-blue-600">联系客服</a>
            <a href="#" class="text-gray-600 hover:text-blue-600">网站导航</a>
            <a href="login.html" class="text-gray-600 hover:text-blue-600 login-item">登录</a>
            <a href="register.html" class="text-gray-600 hover:text-blue-600 register-item">注册</a>
        </div>
    </div>
</header>

<!-- 帮助中心主体内容 -->
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-md shadow-md p-8">
        <!-- 搜索框 -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold mb-4">帮助中心</h1>
            <form action="#" class="flex">
                <input type="text" placeholder="搜索常见问题"
                       class="w-full border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:border-blue-600">
                <button type="submit"
                        class="bg-blue-600 text-white px-6 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none">搜索</button>
            </form>
        </div>

        <!-- 常见问题分类 -->
        <div class="mb-8">
            <h2 class="text-xl font-bold mb-4">常见问题分类</h2>
            <div class="flex flex-wrap space-x-4 space-y-2">
                <a href="#" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">账号相关</a>
                <a href="#" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">房源发布</a>
                <a href="#" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">房源搜索</a>
                <a href="#" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">支付问题</a>
                <a href="#" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">其他问题</a>
            </div>
        </div>

        <!-- 常见问题解答 -->
        <div>
            <h2 class="text-xl font-bold mb-4">常见问题解答</h2>
            <div class="border-t border-gray-300">
                <div class="question py-4 px-2 border-b border-gray-300" onclick="toggleAnswer(this)">
                    <span class="font-bold">如何注册账号？</span>
                    <i class="fa-solid fa-chevron-down float-right"></i>
                    <div class="answer">
                        <p>您可以点击网站顶部导航栏的“注册”按钮，然后按照页面提示填写相关信息，包括手机号码、验证码、密码等，填写完成后点击“注册”即可完成账号注册。</p>
                    </div>
                </div>
                <div class="question py-4 px-2 border-b border-gray-300" onclick="toggleAnswer(this)">
                    <span class="font-bold">怎样发布房源信息？</span>
                    <i class="fa-solid fa-chevron-down float-right"></i>
                    <div class="answer">
                        <p>登录账号后，点击网站首页的“免费发布”按钮，进入房源发布页面。在该页面，您需要填写房源的详细信息，如房源标题、类型、地域、区域、小区名称、面积、厅室、出租/出售方式、价格以及详细描述等，还可以上传房源图片。填写完成后，点击“发布房源”按钮即可。</p>
                    </div>
                </div>
                <div class="question py-4 px-2 border-b border-gray-300" onclick="toggleAnswer(this)">
                    <span class="font-bold">如何搜索特定区域的房源？</span>
                    <i class="fa-solid fa-chevron-down float-right"></i>
                    <div class="answer">
                        <p>您可以在网站首页的搜索框中输入您想要搜索的房源相关信息，如地域、区域、小区名称等。同时，也可以在筛选条件区域选择具体的地域、区域、地铁线路等条件进行精准筛选，然后点击“搜房源”按钮即可搜索到符合条件的房源。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleAnswer(question) {
        question.classList.toggle('active');
        const icon = question.querySelector('i');
        icon.classList.toggle('fa-chevron-down');
        icon.classList.toggle('fa-chevron-up');
    }
</script>
</body>

</html>
